<template>
  <div class="loanApplication">
    <div style="position: relative;width:100%;height:50px;">
      <van-nav-bar
        fixed
        title="确认借款"
        left-arrow
        @click-left="onClickLeft"
      />
    </div>
    <div class="countdown">
      <CountDown style="color:#fff" :endTime="exprDate" v-if="exprDateState"/>
      <p v-if="!exprDateState">额度已过期，请点击返回重新激活</p>
    </div>
    <van-cell-group class="text-left">
      <van-cell title="借款金额（元）" title-class="font16" value-class="borrow-money" :value="(borrowing.lineCredit/100).toFixed(2)"/>
      <van-cell title="收/还款账户" title-class="font16" :value="bankCardValue" value-class="add-bank-card" @click="addbankCardClick"/>
      <van-cell class="po-r" title="到账金额（元）" title-class="font16" slot>
        <div class="van-cell__value">
          <span>{{(borrowing.lineCredit/100).toFixed(2)}}</span>
          <div class="van-cell__label">含乐分期现金券</div>
        </div>
      </van-cell>
    </van-cell-group>
    <div>
    <van-panel class="text-left installment" title="分期详情">
      <van-row class="installment-title">
        <van-col class="text-left" span="8">期数</van-col>
        <van-col class="text-center" span="8">还款金额</van-col>
        <van-col class="text-right" span="8">还款日</van-col>
      </van-row>
      <van-row class="installment-value" v-for="item in plans" :key="item.number">
        <van-col class="text-left" span="8">{{item.number}}期</van-col>
        <van-col class="text-center" span="8">{{(item.repayMoney/100).toFixed(2)}}</van-col>
        <van-col class="text-right" span="8">{{item.repayDate}}</van-col>
      </van-row>

    </van-panel>

    <div class="agreement-select text-left">
      <van-checkbox size="{14}" class="bottom-agreement" checked-color="#FF8024" v-model="checked">已阅读并同意<a @click="aHref(link1,'信息咨询及信用管理服务合同')">《信息咨询及信用管理服务合同》</a><a @click="aHref(link2,'用户授权协议')" >《用户授权协议》</a><a @click="aHref(link3,'江西银行网络交易资金账户服务三方协议')" >《江西银行网络交易资金账户服务三方协议》</a></van-checkbox>
    </div>
          <!-- :disabled="!checked" -->
      <van-button class="btn"
          round size="normal"
          :disabled="!checked"
          @click="btnClick">立即提现</van-button>
    </div>
  </div>
</template>

<script>
import CountDown from '@/components/CountDown.vue'
import { Cell, CellGroup, Panel, Row, Col,Checkbox, CheckboxGroup, Button, Toast, Dialog,NavBar} from 'vant';
export default {
  components:{
    [Cell.name]:Cell,
    [CellGroup.name]:CellGroup,
    [Panel.name]:Panel,
    [Row.name]:Row,
    [Col.name]:Col,
    [Checkbox.name]:Checkbox,
    [CheckboxGroup.name]:CheckboxGroup,
    [Button.name]:Button,
    [Toast.name]:Toast,
    [Dialog.name]:Dialog,
    [NavBar.name]:NavBar,
    CountDown,
  },
  data(){
    return{
      checked:true,
      exprDate:'2019-1-6 22:43:30',//倒计时
      info:'',
      token:'',
      bankCardValue:'+添加储蓄卡',
      bankId:'',//银行卡Id
      exprDateState:false,
      borrowing:'',//信息
      repayPlansId:'',//还款计划
      plans:'',
      link1:'https://www.77dianjin.com/sevenWallet/html/Agreement/manageAssociation.html',
      link2:'https://www.77dianjin.com/sevenWallet/html/Agreement/sqxy.html',
      link3:'https://www.77dianjin.com/sevenWallet/html/Agreement/bankDeal.html'
    }
  },
  mounted(){
    _hmt.push(['_trackPageview', '/loanpage']);
    this.$util.goBack();
    Toast.loading({duration:1000,mask: false,message: '加载中...'});
    let _this = this;
    this.$util.getUser().then(token=>{
      console.log(token)
       _this.token=token;
      if(token!='-1'){
        _this.myInfo(token);
        // _this.getContractInfo(token);
        _this.borrowingSchedule(token);

      }
    })

  },
  methods:{
    aHref(url,title){
      // this.$util.nativeHeader(url,title)
      window.location.href = url;
    },
    onClickLeft(){
      this.$util.url('/HomeIn','首页');
    },
    addbankCardClick(){
      if(this.bankCardValue!='+添加储蓄卡'){
        return;
      }
      this.$util.url('/addBankCard','添加储蓄卡');
    },
    // getContractInfo(token){
    //   this.$api.post('/borrowing/v1/getContractInfo?bankrollCode='+this.$util.bankrollCode,{},s=>{
    //     console.log(s);
    //     if(s.module.length!=0){
    //       if(s.module[0].name == ''){
    //         this.link1 = s.module[0].link;
    //         this.link2 = s.module[1].link;
    //       }else{
    //         this.link1 = s.module[1].link;
    //         this.link2 = s.module[0].link;
    //       }
    //     }


    //   },f=>{
    //     if(f.resultCode=='10000'||f.resultCode=='10003'||f.resultCode=='10001'||f.resultCode=='10002'){
    //       _this.$util.url('/HomeBefore','首页')
    //     }else{
    //       Toast(f.errorMessage);
    //     }
    //   },{
    //     'Accept': 'application/json',
    //     'channelCode':this.$util.channelCode,
    //     'version':this.$util.version,
    //     'token':token
    //   })
    // },
    btnClick(){
      let _this= this;
      if(!this.exprDateState){
        // 因该是homeIn的借款过期
        this.$util.url('/homeIn','首页');
        return;
      }
      if(!this.borrowing.bankCardDto){
        Toast('请添加储蓄卡')
        return;
      }
      if(!this.checked){
        Toast('请勾选协议')
        return;
      }
      this.$api.post('/borrowing/v1/confirmBorrowMoney?bankrollCode='+this.$util.bankrollCode+'&bindCardId='+this.borrowing.bankCardDto.id+'&planId='+this.repayPlansId,{},s=>{
        console.log(s);
        if(s.module.state==20){
          let token = _this.token;
          _this.borrowingSchedule(token);
        }
         // 因该是homeIn的借款中
        // this.$util.url('/homeIn','首页');

      },f=>{
        if(f.resultCode=='10000'||f.resultCode=='10003'||f.resultCode=='10001'||f.resultCode=='10002'){
          _this.$util.url('/HomeBefore','首页')
        }else{
          Toast(f.errorMessage);
        }
      },{
        'Accept': 'application/json',
        'channelCode':this.$util.channelCode,
        'version':this.$util.version,
        'token':this.token
      })
    },
    // 贷中进度查询
    borrowingSchedule(token){
      let _this = this;
      this.$api.get('/borrowing/v1/borrowingSchedule?bankrollCode='+this.$util.bankrollCode,{},s=>{
        console.log(s);
        if(s.module.state ==10){
          _this.borrowing=s.module;
          _this.exprDate = s.module.exprDate;
          _this.exprDateState = true;
          if(s.module.repayPlans){
            _this.plans = s.module.repayPlans[0].plans
          }
          if(s.module.bankCardDto){
            _this.bankCardValue = s.module.bankCardDto.sortName;
          }
        }else if(s.module.state ==0){
          _this.exprDateState = false;
        }else if(s.module.state ==20||s.module.state ==1||s.module.state ==-1){
          _this.$util.url('/homeIn','首页')
        }else if(s.module.state ==30){
          _this.$util.url('/homeAfter','首页')
        }
        _this.repayPlansId = s.module.repayPlans[0].id;
      },f=>{
        if(f.resultCode=='10000'||f.resultCode=='10003'||f.resultCode=='10001'||f.resultCode=='10002'){
          _this.$util.url('/HomeBefore','首页')
        }else{
          Toast(f.errorMessage);
        }
      },{
        'Accept': 'application/json',
        'channelCode':this.$util.channelCode,
        'version':this.$util.version,
        'token':token
      })
    },
    myInfo(token){
      let _this = this;
      this.$api.post('/user/v1/info',{},s=>{
        console.log(s);
        _this.info = s.module;
        // 是否绑定卡
        if(!s.module.isBindCard){
          _this.bankCard(token);
        }
      },f=>{
        Toast(f.errorMessage);
      },{
        'Accept': 'application/json',
        'channelCode':this.$util.channelCode,
        'version':this.$util.version,
        'token':token
      })
    },
    bankCard(token){
      let _this = this;
      this.$api.get('/card/v1/list',{},s=>{
        console.log(s);
        if(!s.module){
          return false;
        }
        if(s.module.length!=0){
          let cardNumber = s.module[0].cardNumber;
          let cardNumberName= cardNumber.substr(cardNumber.length-4);
          _this.bankCardValue  = `${s.module[0].bankName} (尾号为 ${cardNumberName})`;
          _this.bankId = s.module[0].bankId;
        }
      },f=>{
        Toast(f.errorMessage);
      },{
        'Accept': 'application/json',
        'channelCode':this.$util.channelCode,
        'version':this.$util.version,
        'token':token
      })
    }

  }
}
</script>

<style>
.installment .van-cell__title{
    font-size:16px;
    color:#1D0F00;
}
.add-bank-card{
  color:#6699CC;
}
.borrow-money{
  font-weight:600;
  color:#1D0F00;
}
.bottom-agreement .van-icon{
  position:relative;
  top:2px;
  font-size: 12px;
  width: 13px;
  height: 13px;
  font: 12px/1 "vant-icon";
}
.font16{
  font-size:16px;
}
</style>


<style scoped lang="scss">
  /***
  * 产品主题颜色需求
  * #FF8024 按钮 突出文字 ico
  * #FFD500 B辅助色
  * #FFEC9C c辅助色
  * #1D0F00 重要文字
  * #41424E 副标题段落
  * #797A79 次要文字
  * #A9AAA9 不可点击
  * #E6E6E6 分割线 描边
  * #F6F7F6 背景
  * #6699CC 链接
  */
.loanApplication{
  width:100%;
  height:100%;
  background:#F6F7F6;
}
.countdown{
  // display: flex;
  height:32px;
  padding-left:16px;
  font-size:14px;
  line-height: 32px;
  text-align: left;
  background:#FF8024;
  color:#fff;
}
.installment{
  margin-top:13px;
}
.installment-title{
  padding:0 15px;
  margin-top:15px;
  font-size:14px;
  line-height:20px;
  color:#41424E;
}
.installment-value{
  padding:0 15px;
  font-size:14px;
  line-height:40px;
  color:#797A79;
}
.bottom-agreement{
  display: flex;
  flex-direction: row;
  height: 40px;
  margin-top:17px;
}
.agreement-select{
  padding:0 15px;
  font-size:12px;
  line-height: 40px;
  a{
    font-size:12px;
    color:#6699CC;
  }
}
.btn{
  width:90%;
  margin-top:40px;
  background:#FF8024;
  color:#fff;
}


</style>

